<template>
  <section>
    <el-form
      inline
      size="small"
      label-width="200px"
      :model="formData"
      :rules="rules"
      ref="formName"
    >
      <el-row>
        <el-form-item label="售电方数字身份">
          {{
          formData.offerer_did
          }}
        </el-form-item>
      </el-row>
      <el-row>
        <el-form-item label="交易周期">{{ formData.tpno }}</el-form-item>
      </el-row>
      <el-row>
        <el-form-item label="数量（度）" prop="show_qty">
          <el-input type="text" v-model.number="formData.show_qty" />
        </el-form-item>
      </el-row>
      <el-row>
        <el-form-item label="价格（元）" prop="show_price">
          <el-input disabled type="number" v-model.number="formData.show_price" />
        </el-form-item>
      </el-row>
    </el-form>
    <el-row type="flex" justify="center" slot="footer" class="dialog-footer">
      <el-button size="small" type="primary" @click="submit" :loading="loading">确认购买</el-button>
      <el-button size="small" @click="()=>this.$emit('close')" :loading="loading">关闭</el-button>
    </el-row>
  </section>
</template>
<script lang='ts'>
import { Vue, Component, Watch, Prop } from "vue-property-decorator";

@Component
export default class MyApplication extends Vue {
  @Prop()
  protected data!: any;
  protected formData: any = {};
  protected loading: boolean = false;

  protected rules: any = {
    show_qty: [],
    price: [
      { required: true, message: "请输入价格", trigger: "change" }
    ]
  };

  protected quantityRuler: any = (rule: any, value: any, callback: any) => {
    const { deal_qty, min_txn_qty, quantity } = rule.data;
    if (value === "") {
      callback(new Error("请输入购电量"));
    } else if (value < min_txn_qty) {
      callback(new Error(`最小购电量${min_txn_qty}`));
    } else if (value > quantity - deal_qty) {
      callback(new Error(`剩余电量${quantity - deal_qty}`));
    } else {
      callback();
    }
  };

  protected created() {
    this.$nextTick(() => {
      this.$set(this, "formData", this.data);
      this.$set(
        this.formData,
        "show_price",
        Vue.prototype.$coinToYuan(this.formData.price)
      );
      this.$set(
        this.formData,
        "show_qty",
        this.formData.min_txn_qty
      );
      this.$set(this.rules.show_qty, 0, {
        required: true,
        validator: this.quantityRuler,
        trigger: "change",
        data: this.formData
      });
    });
  }

  protected submit() {
    (this.$refs.formName as any).validate(async (valid: boolean) => {
      if (valid) {
        this.loading = true;
        const { ...params }: any = this.formData;
        params.price = params.show_price * 100;
        params.quantity = this.formData.show_qty;
        params.type = "buy";
        const res: any = await this.$api
          .creatOrder(params)
          .then((response: any) => {
            this.$message.success("购买成功");
            this.$emit("close");
            this.loading = false;
          })
          .catch((e: any) => {
            this.$message.error("购买失败");
            this.loading = false;
          });
      }
    });
  }
}
</script>

<style lang="scss" scoped>
.mr_w_10 {
  margin: 0 10px;
}
.el-form-item--small.el-form-item {
  width: 100%;
}
/deep/ .el-form-item--small .el-form-item__content {
  width: 60%;
}
.el-select {
  width: 100%;
}
</style>


